<?php
session_start();

	//$makeName = md5($_SESSION['SESS_MEMBER_ID']);
	$userID = $_SESSION['SESS_MEMBER_ID'];
        //$name = $_SESSION['user_name'];
	//$session = $_SESSION['chat'];
	$chatID = $_SESSION['chatID']
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head profile="http://gmpg.org/xfn/11"> 
	<title>PHP Chat</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	 
	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head> 
<body> 
 
 <h1>PHP Chat</h1>
 <h3>Chat ID: <?php echo $chatID;?></h3>
<form id="deliver">
<input type="hidden" name="username" id="username" value="<?php echo $userID; ?>"/>
<input type="hidden" name="chatID" id="chatID" value="<?php echo $chatID; ?>"/>
	<p class="text"> 
		<div id="chat">
        	<span id="loading">Loading...</span>
        </div>
	</p> 
    
<p class="text"> 
		<input type="text" id="usermsg" name="usermsg"/>
	</p> 
	<p class="submit"> 
		<input type="submit" value="Send"></input>
	</p> 
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
	//global vars
	var inputUser = $("#username");
	var inputMessage = $("#usermsg");
	var inputChat = $("#chatID");
	var loading = $("#loading");
	var messageList = $("#chat");
	

	function updateChat(){
		
		//messageList.hide();
		loading.fadeIn();

		var id = inputChat.attr("value");
		$.ajax({
			type: "POST", url: "post.php", data: "action=update&chat=" + id,
			complete: function(data){
				loading.fadeOut();
				messageList.html(data.responseText);
				messageList.show();
			}
		});
	}

	//Load for the first time the shoutbox data
	updateChat();
	
	
	$("#deliver").submit(function(){
		
			var nick = inputUser.attr("value");
			var message = inputMessage.attr("value");
			var chat = inputChat.attr("value");
			
			//we deactivate submit button while sending
			//$("#send").attr({ disabled:true, value:"Sending..." });
			//$("#send").blur();
			$.ajax({
				type: "POST", url: "post.php", data: "action=insert&name=" + nick + "&chat=" + chat + "&msg=" + escape(message),
				complete: function(data){
					messageList.html(data.responseText);
					updateChat();
					//reactivate the send button
					$("#send").attr({ disabled:false, value:"Send" });
				}
			 });
	});


	//refresh every comple secs
	 var refreshId = setInterval(function(){
		 updateChat();
		   }, 10000);
	
});
</script>
</body> 
</html>